<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .green {
            color: rgb(62, 226, 62);
        }

        .red {
            color: red;
        }
    </style>
</head>

<body>
    <div id="app">
        <!-- <div>您当前的成绩为: {{score}},成绩等级为: <span :class='Color()'>{{result}}</span></div> -->
        <ul>
            <li v-for='item in students'>学号:{{item.id}} 姓名:{{item.name}} 成绩:{{item.score}}
                成绩等级: <span :class='Color(item.score)'>{{result(item.score)}}</span></li>
        </ul>
    </div>
    <script src='../js/vue.js'></script>
    <script>
        const app = new Vue({
            el: '#app',
            data: {
                students: [
                    { id: 1001, name: '张三', score: 123 },
                    { id: 1002, name: '李四', score: 46 },
                    { id: 1003, name: '王五', score: 78 },
                    { id: 1004, name: '成六', score: 42 },
                    { id: 1005, name: '马七', score: 90 },
                    { id: 1006, name: '王朝', score: 105 },
                    { id: 1007, name: '马汉', score: 89 },
                    { id: 1008, name: '张龙', score: 69 },
                    { id: 1009, name: '赵虎', score: 100 },
                    { id: 1009, name: '张东', score: 60 },
                    { id: 1009, name: '李宁', score: 90 },
                    { id: 1009, name: '王虎', score: -2 },
                ],
                isTrue: true,
            },  
            methods: {
                result(score) {
                    let showMessage = ''
                    if (score < 0 || score > 100) {
                        showMessage = '数据有误!'
                    } else if (score >= 90) {
                        showMessage = '优秀'
                    } else if (score >= 80) {
                        showMessage = '良好'
                    } else if (score >= 60) {
                        showMessage = '及格'
                    } else {
                        showMessage = '不及格'
                    }
                    return showMessage;
                },
                Color(score) {
                    if(score < 0 || score > 100) {
                        return {red: this.isTrue}
                    }else{
                        return {green: this.isTrue}
                    }
                }
            }
        })
    </script>
</body>

</html>